<template>
    <div class="contain">
        <div class="home_top">
            <h2>
                <a target="_blank"
                   href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D%E8%81%8C%E4%B8%9A%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2/6287431">四川职业技术学院</a>
            </h2>
            <p>
                四川职业技术学院（Sichuan Vocational & Technical College）位于四川省遂宁市，是一所由四川省人民政府举办，四川省人民政府、遂宁市人民政府共建
                的全日制普通高等职业院校，2014年成为四川省示范性高职院校。 2017年11月20日，学院入选四川省优质高等职业院校建设计划立项建设院校。
            </p>
            <p>
                四川职业技术学院于2002年由四川省机电工程学校和川北教育学院组建而成，四川省机电工程学校始建于1917年，时为全国重点中专；川北教育学院始建于1956年。
            </p>
            <p>
                截至2015年12月，四川职业技术学院共有新、老两个校区，占地1100亩，建筑总面积286782平方米，固定资产总值6亿元，其中教学仪器设备总值8530万元；建有10个教学系，开设高职专科专业53个；共有教职工750人，其中专任教师332人，全日制普通大专学生14000余人。
            </p>
        </div>

        <el-row v-bind:gutter="20">
            <!--        学生男女比例图    -->
            <el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
                <v-chart autoresize :option="student_gender_option" style="height: 400px"></v-chart>
            </el-col>
            <!--        招生人数统计    -->
            <el-col :xl="12" :lg="12" :md="8" :sm="12" :xs="24">
                <v-chart autoresize :option="enrollment_option" style="height: 400px"></v-chart>
            </el-col>
            <!--          教师水平图  -->
            <el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
                <v-chart autoresize :option="teacher_faculty_option" style="height: 400px"></v-chart>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {chartDegree} from "../../api/modules/teacher/base";
    import {chartEnrollmentPlan, chartGender} from "../../api/modules/student/base";

    export default {
        name: 'Home',

        data() {
            return {
                // 学生比例
                student_gender_option: {
                    title: {
                        text: '学生男女比例',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: false, readOnly: true},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '比例',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },
                // 师资力量
                teacher_faculty_option: {
                    title: {
                        text: '师资力量',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: false, readOnly: true},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '比例',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },
                // 招生人数
                enrollment_option: {
                    title: {
                        text: '历年招生人数'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: false, readOnly: true},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['近三年招生人数']
                    },
                    series: []
                }
            };
        },

        methods: {
            // 初始化比例图
            initStudentGenderOption() {
                chartGender().then(response => {
                    this.student_gender_option.series[0].data = response;
                })

            },
            // 初始化师资力量图
            initTeacherFacultyOption() {
                chartDegree().then(response => {
                    this.teacher_faculty_option.series[0].data = response;
                })
            },
            //    初始化招生人数图
            initEnrollmentOption() {
                chartEnrollmentPlan().then(response => {
                    this.enrollment_option.series = response;
                })
            },
            initChart() {
                this.initEnrollmentOption();
                this.initTeacherFacultyOption();
                this.initStudentGenderOption();
            }
        },

        mounted() {
            this.initChart();
        },

        computed: {},

        watch: {}
    }
</script>

<style scoped lang="scss">
    .home_top {
        p {
            text-indent: 2rem;
        }

        h2 {
            letter-spacing: 1rem;

            a {
                color: #1a1a1a;
                text-decoration-line: none;
            }
        }
    }
</style>